<script setup>
import {defineProps} from 'vue'
const props = defineProps({
  title:{required:true,type:String}
})
</script>
<template>
  <el-card class="page-container">
   <template #header>
     <div class="card-header">
       <span>{{ title }}</span>
       <div class="extra">
         <slot name="extra"></slot>
       </div>
     </div>
   </template>
   <!-- 内容区域 -->
   <slot></slot>
 </el-card>
</template>
<style lang="scss" scoped>
.page-container{
 min-height: 100%;
 box-sizing: border-box;
 .card-header{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
}
</style>
